<template>
  <div style="padding:0 20px">
    <el-drawer title="任务详情" size="800px" :visible.sync="visible" :wrapperClosable="false">
      <template #title>
        <div>任务详情 <el-tag :type="statusType" v-if="task">{{ statusLabel }}</el-tag></div>
      </template>
      <template v-if="task">
        <el-form label-width="120px">

          <el-form-item label="任务标题">
            <el-input v-model="task.WT_Title"></el-input>
          </el-form-item>
          <el-form-item label="任务内容">
            <el-input type="textarea" :maxlength="1000" show-word-limit v-model="task.WT_Description"></el-input>
          </el-form-item>
          <el-form-item label="分值">
            <el-input v-model="task.WT_Score"></el-input>
          </el-form-item>
          <el-form-item label="发布人">
            {{ task.PublisherName }}
          </el-form-item>
          <el-form-item label="开发负责人">
            {{ task.HandlerName }}
          </el-form-item>
          <el-form-item label="发布时间">
            {{ task.WT_CreateTime || formatTime }}
          </el-form-item>
          <el-form-item label="预计完成时间">
            {{ task.WT_PredictFinish || formatTime }}
          </el-form-item>
          <el-form-item>
            <el-button @click="saveTask">保存修改</el-button>
            <el-button type="danger" @click="visible = false">关闭</el-button>
          </el-form-item>
        </el-form>

      </template>
    </el-drawer>
  </div>
</template>
<script>
import { GetTask, ModifyTask } from '../../../../api/task/workTaskManageApi';
export default {
  props: ['taskId'],
  data() {
    return {
      visible: false,
      task: null,
      statusOptions: [
        { value: -1, label: '全选', tabType: 'danger' },
        { value: 1, label: '新发布', tabType: 'success' },
        { value: 2, label: '开发中', tabType: 'warning' },
        { value: 3, label: '待审核', tabType: 'warning' },
        { value: 4, label: '已完成', tabType: 'default' },
        { value: 6, label: '撤回', tabType: 'danger' }
      ],
    }
  },
  computed: {
    statusType() {
      return this.getStatus().tabType
    },
    statusLabel() {
      return this.getStatus().label
    }
  },
  watch: {
    taskId: {
      immediate: true,
      handler(newVal, oldVal) {
        if (!this.taskId) {
          this.task = null
        } else {
          this.getTask()
          this.visible = true
        }
      }
    },
    visible: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.$emit('update:taskId', null)
        }
      }
    }
  },
  methods: {
    getTask() {
      GetTask(this.taskId).then(r => {
        this.task = r.data
      })
    },
    getStatus: function () {
      console.log('1', this.task)
      if (!this.task) {
        return {}
      }
      let s = this.statusOptions.find(s => s.value == this.task.WT_Status)
      console.log('2', s)
      if (s == null) {
        return { value: -100, label: "未知:" + this.task.WT_Status, }
      }
      return s;
    },
    saveTask() {
      this.$confirm('确定要保存修改？', '注意').then(r => {
        ModifyTask(this.task).then(r => {
          this.$message({
            type: 'success',
            message: '任务修改成功'
          });
          this.getTask()
        })
      })


    }
  }
}
</script>